// console.log(lrc); //这句可以打印出歌词字符串

/**
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象:
 * {time:开始时间，words:歌词内容}
 */
function parseLrc() {
    var lines = lrc.split('\n');
    var lrcArr = [];
    for (var i = 0; i < lines.length; i++) {
        var str = lines[i];
        // console.log(str);
        var parts = str.split(']');
        var timeStr = parts[0].substr(1);
        // console.log(parts);
        // console.log(timeStr);
        
        var obj = {
            time:parseTime(timeStr),
            words:parts[1]
        }
        // console.log(obj);
        lrcArr.push(obj);
    }
    // console.log(lines);
    return lrcArr;
}

/**
 * 解析时间字符串 解析为数字秒数
 * @param {string} timeStr 时间字符串，格式为：[mm:ss]
 */
/* 
 */
function parseTime(timeStr) {
    var parts = timeStr.split(':');
    // console.log(parts);
    // console.log(+parts[0]*60 + +parts[1]);
    return +parts[0]*60 + +parts[1];
    
}

var lrcData = parseLrc()

//获取播放器
var doms = {
    audio:document.querySelector('audio'),
    ul:document.querySelector('.container ul'),
    container:document.querySelector('.container')
}

// console.log(lrcData);
/* 当前播放器播放的时间 
计算出，在当前的情况下lrcData数组中，应该高亮显示的歌词下标
*/
function findIndex() {
// console.log(doms.audio.currentTime);
//播放器当前播放的时间
var curTime = doms.audio.currentTime;
for (var i = 0; i < lrcData.length; i++) {
    if(curTime < lrcData[i].time) {
        return i-1;
}
}
return lrcData.length-1;  //如果播放器播放的时间大于lrcData数组中最后一个歌词的时间，则返回最后一个歌词的下标
}

//界面
/* 
创建歌词元素 li
*/

// function createLrcElements(){
//     for(var i=0; i<lrcData.length; i++){
//         var li = document.createElement('li');
//         li.textContent = lrcData[i].words;
//         doms.ul.appendChild(li);
//     }
// }

/**
 * 上面代码改动了DOM树，循环一次改动一次DOM树，
 * 性能不好，但在这里问题不大，因为歌词数量不会太多
 * 但可以做以下优化，把所有的li都创建好，然后统一添加到
 * DOM树中，先添加到文档片段中，然后再添加到DOM树中
 */
function createLrcElements(){
var fragment = document.createDocumentFragment(); //文档片段
for(var i=0; i<lrcData.length; i++){
            var li = document.createElement('li');
            li.textContent = lrcData[i].words;
            fragment.appendChild(li);
        }
        doms.ul.appendChild(fragment);   
}
createLrcElements();
//容器高度
var containerHeight = doms.container.clientHeight;
//每个li的高度
var liHeight = doms.ul.children[0].clientHeight;
//最大偏移量
var maxOffset = doms.ul.clientHeight - containerHeight;
/**
 * 设置ul元素的偏移量
 */
function setOffset(){
    var index = findIndex();
    var offset = liHeight * index + liHeight/2 - containerHeight/2;
    if (offset < 0){
        offset = 0;
    }
    if (offset > maxOffset){
        offset = maxOffset;
    }
    // doms.ul.style.transform = 'translateY(-'+offset+'px)';  //或
    doms.ul.style.transform = `translateY(-${offset}px)`;
    
    //去掉之前的active类
    var li = doms.ul.querySelector('.active');
    if (li){
        li.classList.remove('active');
    }
    //添加active类
    var li = doms.ul.children[index];
    if (li){
        li.classList.add('active');
    }

}

// doms.audio.addEventListener('timeupdate',function(){
//     console.log('播放时间变化了');
//     setOffset();
// })

doms.audio.addEventListener('timeupdate',setOffset);

